<template>
    <div id="editor" ref="myEditor"></div>
</template>
<script>
  import WangEditor from 'wangeditor'
 
  export default {
    name: 'MyEditor',
    data () {
      return {
        edit: '',
        btnmenu:[
            'head',//标题
            'bold',//粗体
            'fontSize',//字号
            'fontName',//字体
            'italic',//斜体
            'undeline',//下划线
            'strikeThrough',//删除线
            'foreColor',//文字颜色
            'backColor',//背景颜色
            'link',//插入链接
            'list',//列表
            'justify',//对齐方式
            'quote',//引用
            'emoticon',//表情
            'image',//插入图片
            'table',//表格
            'video',//插入视频
            'code',//插入代码
            'undo', //撤销
            'redo', // 重复
        ]
      }
    },
    watch:{
      rule:{
        deep:true,
        handler(newval){
          if (newval !== this.editor.txt.html()) {
            this.editor.txt.html(newval)
          }
        }
      }
    },
    props: ["rule"],
    methods: {
        initEditor () {
            var self = this
            // 初始化
            this.editor = new WangEditor(this.$refs.myEditor)
            console.log(this.editor);
            this.editor.config = {
                // 设置编辑器层级
                zIndex:999,
                // 配置按钮菜单
                menus:this.btnmenu,
                // 粘贴时不忽略图片
                pasteIgnoreImg: false, 
                // 去掉复制过来的样式
                pasteFilterStyle:true, 
                //限制一次最多上传 9 张图片
                uploadImgMaxLength:9, 
                //图片大小限制为2M
                uploadImgMaxSize:2*1024*1024, 
                // 自定义配置颜色（字体颜色、背景色）
                colors: ['#000000','#eeece0','#1c487f','#4d80bf','#c24f4a','#8baa4a','#7b5ba1'],
                // 自定义字体
                fontNames : ["PingFangSC"],
 
                // 自定义处理粘贴的文本内容
                pasteTextHandle: function (content) {
                    // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
                    // 例如 ： return content + '<p>在粘贴内容后面追加一行</p>'
                    return content
                },
            };
            
            // 配置 onchange 事件
            this.editor.change = function () { // 编辑区域内容变化时
                // 注意这里的this指向
                self.$emit('input', this.txt.html())
            }
 
            //配置上传图片
            this.editor.customConfig.customUploadImg = function (files, insert) {
                var formData = new FormData()
                files.forEach(file => {
                    formData.append('file', file)
                })
                let headers = {
                    Authorization : 'Bearer ' + ACCESS_TOKEN
                }
                axios.post('/api/sysFileInfo/commonUpload', formData, {headers}).then(({ data }) => {
                    if (data.success && data.code === 200) {
                        let  url = data.data.imgUrl
                        insert(url)
                    }
                })
            }
            this.editor.customConfig.showMenuTooltips = true
            this.editor.customConfig.showFullScreen = true
            this.editor.create() // 生成编辑器
            this.editor.txt.text(this.rule) // 初始化的时候设置编辑器的内容
            this.$emit('oninit', this.editor)
      },
 
    },
    mounted () {
      this.initEditor()
    },
  }
</script>
 
<style lang="less">
  
  .w-e-toolbar{
    flex-wrap:wrap;
    max-width: 660px;
    background-color: #fff!important;
    .w-e-block{
        white-space: pre-wrap;
    }
  }
 
</style>